<template>
  <div class="header">
    <div class="header-left">
      <span class="iconfont back-icon">&#xe624;</span>
    </div>
    <div class="header-input">
      <span class="iconfont">&#xe632;</span>
      内容
    </div>
    <router-link to="City">
      <div class="header-right">
      {{this.city}}
      <span class="iconfont arrow-icon">&#xe600;</span>
    </div>
    </router-link>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'Home',
  computed: {
    ...mapState(['city'])
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  @import '~@/assets/styles/varibles.styl'
    // 1rem = html font-size =50px
    .header
      display: flex   
      height :.86rem
      line-height :0.86rem
      background: $bgColoer
      color :#fff
      .header-left
        min-width :0.44rem
        float: left
        .back-icon
          font-size :.4rem
          padding-left :.2rem
      .header-input
        flex :1
        margin-top :0.12rem
        margin-left :.2rem
        height :.64rem
        line-height :.64rem
        background :#fff
        border-radius :0.1rem
        color :#ccc
      .header-right
        min-width :1.04rem
        padding :0 0.1rem
        float: right
        text-align :center
        color :#fff
        .arrow-icon
          margin-left :-0.09rem
          font-size :.4rem   
</style>
